<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 组合式API watchEffect -->

<body>
<div id="app">

</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 引用类型的计算属性 get 与 set
    const app = Vue.createApp({
        setup(props, context) {
            const {ref, watch, watchEffect} = Vue;
            let brand = ref('');
            let site = ref('');

            // 侦听器
            /*
            * 1) 有惰性
            * 2) 更加具体
            * 3) 可以访问属性之前的值
            * 4) 可配置 <非惰性，深度监听>
            */
          /*  watch(brand, (currentBrand, oldBrand)=>{
                // 相应的业务处理
                console.log("现在的值：", currentBrand);
                console.log("之前的值：", oldBrand);
            }, {
                immediate: false,    // 配置是否为惰性值，如果为 true，界面进入的时候就会做监听
                deep: true,         // 配置深度监听
            });*/


            /*
             watchEffect 函数：
             1) 非惰性（页面加载的时候就开始执行）
             2) 更加抽象（没有监听指定的值，只要页面的数据有变化，就会触发）
             3) 不可以访问之前的值（old 值）
             */
            watchEffect( ()=>{
                console.log("开始 WatchEffect 监听......");

                // 每次变化都可以获取到最新的变化值
                console.log("brand 值：", brand.value);
                console.log("site 值：", site.value);
            });

            return {
                brand, site
            }
        },
        template: `
          <div>
              <div>
                品牌：<input type="text" v-model="brand"/>
                <p>输入的品牌是：{{ brand }}</p>
              </div>
              <div>
                网址：<input type="text" v-model="site"/>
                <p>输入的品牌是：{{ site }}</p>
              </div>
          </div>
        `
    }).mount("#app");

</script>

</html>
